React useFormState: En djupdykning i modern formulärhantering och validering

Formulär är hörnstenen i webbinteraktivitet. Från enkla kontaktformulär till komplexa flerstegsguider är de avgörande för användarinmatning och datainlämning. I åratal har React-utvecklare navigerat i ett landskap av lösningar för tillståndshantering, från enkla useState-hooks för grundläggande scenarier till kraftfulla tredjepartsbibliotek som Formik och React Hook Form för mer komplexa behov. Även om dessa verktyg är utmärkta, utvecklas React ständigt för att erbjuda mer integrerade och kraftfulla primitiver.

Här kommer useFormState, en hook som introducerades i React 18. Ursprungligen designad för att fungera sömlöst med React Server Actions, erbjuder useFormState ett strömlinjeformat, robust och inbyggt tillvägagångssätt för att hantera formulärtillstånd, särskilt när det gäller logik och validering på serversidan. Det förenklar processen att visa feedback från servern, såsom valideringsfel eller framgångsmeddelanden, direkt i ditt användargränssnitt.

Denna omfattande guide tar dig med på en djupdykning i useFormState-hooken. Vi kommer att utforska dess kärnkoncept, praktiska implementationer, avancerade mönster och hur den passar in i det bredare ekosystemet för modern React-utveckling. Oavsett om du bygger applikationer med Next.js, Remix eller ren React, kommer förståelsen för useFormState att utrusta dig med ett kraftfullt verktyg för att bygga bättre och mer motståndskraftiga formulär.

Vad är `useFormState` och varför behöver vi det?

I grund och botten är useFormState en hook designad för att uppdatera state baserat på resultatet av en formuläråtgärd. Se det som en specialiserad version av useReducer som är skräddarsydd specifikt för formulärinskickningar. Den överbryggar elegant klyftan mellan användarinteraktion på klientsidan och bearbetning på serversidan.

Innan useFormState kunde ett typiskt flöde för formulärinskickning som involverar en server se ut så här:

1. Användaren fyller i ett formulär.
2. Tillstånd på klientsidan (t.ex. med useState) spårar inmatningsvärden.
3. Vid inskickning förhindrar en händelsehanterare (onSubmit) webbläsarens standardbeteende.
4. En fetch-förfrågan konstrueras manuellt och skickas till en server-API-slutpunkt.
5. Laddningstillstånd hanteras (t.ex. const [isLoading, setIsLoading] = useState(false)).
6. Servern bearbetar förfrågan, utför validering och interagerar med en databas.
7. Servern skickar tillbaka ett JSON-svar (t.ex. { success: false, errors: { email: 'Invalid format' } }).
8. Koden på klientsidan tolkar detta svar och uppdaterar en annan tillståndsvariabel för att visa fel- eller framgångsmeddelanden.

Denna process, även om den är funktionell, innebär en betydande mängd standardkod (boilerplate) för att hantera laddningstillstånd, feltillstånd och cykeln för förfrågan/svar. useFormState, särskilt i kombination med Server Actions, förenklar detta dramatiskt genom att skapa ett mer deklarativt och integrerat flöde.

De främsta fördelarna med att använda useFormState är:

• Sömlös serverintegration: Det är den inbyggda lösningen för att hantera svar från Server Actions, vilket gör validering på serversidan till en förstklassig medborgare i din komponent.
• Förenklad tillståndshantering: Den centraliserar logiken för uppdateringar av formulärtillstånd, vilket minskar behovet av flera useState-hooks för data, fel och inskickningsstatus.
• Progressiv förbättring: Formulär byggda med useFormState och Server Actions kan fungera även om JavaScript är inaktiverat på klienten, eftersom de bygger på grunden av vanliga HTML-formulärinskickningar.
• Förbättrad användarupplevelse: Det gör det lättare att ge omedelbar och kontextuell feedback till användaren, såsom inbäddade valideringsfel eller framgångsmeddelanden, direkt efter en formulärinskickning.

Förstå signaturen för `useFormState`-hooken

För att bemästra hooken, låt oss först bryta ner dess signatur och returvärden. Det är enklare än det kanske först verkar.

            
const [state, formAction] = useFormState(action, initialState);

            

              
                Copy
              
            
          

Parametrar:

• action: Detta är en funktion som kommer att exekveras när formuläret skickas in. Denna funktion tar emot två argument: formulärets föregående tillstånd och den inskickade formulärdatan. Den förväntas returnera det nya tillståndet. Detta är vanligtvis en Server Action, men det kan vara vilken funktion som helst.
• initialState: Detta är det värde du vill att formulärets tillstånd ska ha initialt, innan någon inskickning har skett. Det kan vara vilket serialiserbart värde som helst (sträng, nummer, objekt, etc.).

Returvärden:

useFormState returnerar en array med exakt två element:

• state: Formulärets nuvarande tillstånd. Vid den initiala renderingen kommer detta att vara det initialState du angav. Efter en formulärinskickning kommer det att vara värdet som returneras av din action-funktion. Detta tillstånd är vad du använder för att rendera UI-feedback, såsom felmeddelanden.
• formAction: En ny åtgärdsfunktion som du skickar till ditt <form>-elements action-prop. När denna åtgärd utlöses (genom en formulärinskickning), kommer React att anropa din ursprungliga action-funktion med det föregående tillståndet och formulärdatan, och sedan uppdatera state med resultatet.

Detta mönster kan kännas bekant om du har använt useReducer. action-funktionen är som en reducer, initialState är det initiala tillståndet, och React hanterar "dispatching" åt dig när formuläret skickas in.

Ett första praktiskt exempel: Ett enkelt prenumerationsformulär

Låt oss bygga ett enkelt formulär för nyhetsbrevsprenumeration för att se useFormState i praktiken. Vi kommer att ha ett enda fält för e-post och en skicka-knapp. Serveråtgärden kommer att utföra grundläggande validering för att kontrollera om en e-postadress har angetts och om den har ett giltigt format.

Först, låt oss definiera vår serveråtgärd. Om du använder Next.js kan du placera detta i samma fil som din komponent genom att lägga till direktivet 'use server'; överst i funktionen.

            
// I actions.js eller överst i din komponentfil med 'use server'

export async function subscribe(previousState, formData) {
  const email = formData.get('email');

  if (!email) {
    return { message: 'E-postadress är obligatorisk.' };
  }

  // Ett enkelt regex i demonstrationssyfte
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)) {
    return { message: 'Ange en giltig e-postadress.' };
  }

  // Här skulle du normalt spara e-postadressen i en databas
  console.log(`Prenumererar med e-post: ${email}`);

  // Simulera en fördröjning
  await new Promise(res => setTimeout(res, 1000));

  return { message: 'Tack för din prenumeration!' };
}

            

              
                Copy
              
            
          

Låt oss nu skapa klientkomponenten som använder denna åtgärd med useFormState.

            
'use client';

import { useFormState } from 'react-dom';
import { subscribe } from './actions';

const initialState = {
  message: null,
};

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribe, initialState);

  return (
    <form action={formAction}>
      <h3>Prenumerera på vårt nyhetsbrev</h3>
      <div>
        <label htmlFor="email">E-postadress</label>
        <input type="email" id="email" name="email" required />
      </div>
      
      <button type="submit">Prenumerera</button>

      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

Låt oss bryta ner vad som händer:

1. Vi importerar useFormState från react-dom (observera: inte react).
2. Vi definierar ett initialState-objekt. Detta säkerställer att vår state-variabel har en konsekvent form från allra första renderingen.
3. Vi anropar useFormState(subscribe, initialState). Detta kopplar vår komponents tillstånd till serveråtgärden subscribe.
4. Den returnerade formAction skickas till <form>-elementets action-prop. Detta är den magiska kopplingen.
5. Vi renderar meddelandet från vårt state-objekt villkorligt. Vid första renderingen är state.message null, så inget visas.
6. När användaren skickar in formuläret anropar React formAction. Detta utlöser vår serveråtgärd subscribe. Funktionen subscribe tar emot previousState (initialt vårt initialState) och formData.
7. Serveråtgärden kör sin logik och returnerar ett nytt tillståndsobjekt (t.ex. { message: 'E-postadress är obligatorisk.' }).
8. React tar emot detta nya tillstånd och renderar om komponenten SubscriptionForm. Variabeln state innehåller nu det nya objektet, och vår villkorliga paragraf visar fel- eller framgångsmeddelandet.

Detta är otroligt kraftfullt. Vi har implementerat en komplett valideringsloop mellan klient och server med minimal standardkod för tillståndshantering på klientsidan.

Förbättra UX med `useFormStatus`

Vårt formulär fungerar, men användarupplevelsen kan bli bättre. När användaren klickar på "Prenumerera" förblir knappen aktiv, och det finns ingen visuell indikation på att något händer förrän servern svarar. Det är här hooken useFormStatus kommer in i bilden.

Hooken useFormStatus ger statusinformation om den senaste formulärinskickningen. Avgörande är att den måste användas i en komponent som är ett barn till <form>-elementet. Den fungerar inte om den anropas i samma komponent som renderar formuläret.

Låt oss skapa en separat SubmitButton-komponent.

            
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Prenumererar...' : 'Prenumerera'}
    </button>
  );
}

            

              
                Copy
              
            
          

Nu kan vi uppdatera vår SubscriptionForm för att använda denna nya komponent:

            
// ... importer
import { SubmitButton } from './SubmitButton';

// ... initialState och annan kod

export function SubscriptionForm() {
  const [state, formAction] = useFormState(subscribe, initialState);

  return (
    <form action={formAction}>
      {/* ... formulärfält ... */}
      <SubmitButton /> {/* Ersätt den gamla knappen */}
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

Med denna ändring, när formuläret skickas, blir pending-värdet från useFormStatus true. Vår SubmitButton-komponent renderas om, inaktiverar knappen och ändrar dess text till "Prenumererar...". När serveråtgärden är klar och useFormState uppdaterar tillståndet, är formuläret inte längre i vänteläge, och knappen återgår till sitt ursprungliga tillstånd. Detta ger väsentlig feedback till användaren och förhindrar dubbletter av inskickningar.

Avancerad validering med strukturerade feltillstånd och Zod

En enkel meddelandesträng fungerar bra för enkla formulär, men verkliga applikationer kräver ofta valideringsfel per fält. Vi kan enkelt uppnå detta genom att returnera ett mer strukturerat tillståndsobjekt från vår serveråtgärd.

Låt oss förbättra vår åtgärd för att returnera ett objekt med en errors-nyckel, som i sig innehåller meddelanden för specifika fält. Detta är också ett perfekt tillfälle att introducera ett schemavalideringsbibliotek som Zod för mer robust och underhållbar valideringslogik.

Steg 1: Installera Zod

            
npm install zod

            

              
                Copy
              
            
          

Steg 2: Uppdatera serveråtgärden

Vi skapar ett Zod-schema för att definiera den förväntade formen och valideringsreglerna för vår formulärdata. Sedan använder vi schema.safeParse() för att validera den inkommande formData.

            
'use server';

import { z } from 'zod';

// Definiera schemat för vårt formulär
const contactSchema = z.object({
  name: z.string().min(2, { message: 'Namnet måste vara minst 2 tecken.' }),
  email: z.string().email({ message: 'Ogiltig e-postadress.' }),
  message: z.string().min(10, { message: 'Meddelandet måste vara minst 10 tecken.' }),
});

export async function submitContactForm(previousState, formData) {
  const validatedFields = contactSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  });

  // Om valideringen misslyckas, returnera felen
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Valideringen misslyckades. Vänligen kontrollera dina inmatningar.',
    };
  }

  // Om valideringen lyckas, bearbeta datan
  // Till exempel, skicka ett e-postmeddelande eller spara i en databas
  console.log('Lyckades!', validatedFields.data);
  // ... bearbetningslogik ...

  // Returnera ett framgångstillstånd
  return {
    errors: {},
    message: 'Tack för ditt meddelande! Vi återkommer till dig inom kort.',
  };
}

            

              
                Copy
              
            
          

Notera hur vi använder validatedFields.error.flatten().fieldErrors. Detta är ett praktiskt Zod-verktyg som omvandlar felobjektet till en mer användbar struktur, som: { name: ['Namnet måste vara minst 2 tecken.'], message: ['Meddelandet är för kort'] }.

Steg 3: Uppdatera klientkomponenten

Nu uppdaterar vi vår formulärkomponent för att hantera detta strukturerade feltillstånd.

            
'use client';

import { useFormState } from 'react-dom';
import { submitContactForm } from './actions';
import { SubmitButton } from './SubmitButton'; // Förutsatt att vi har en submit-knapp

const initialState = {
  message: null,
  errors: {},
};

export function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, initialState);

  return (
    <form action={formAction}>
      <h2>Kontakta oss</h2>
      
      <div>
        <label htmlFor="name">Namn</label>
        <input type="text" id="name" name="name" />
        {state.errors?.name && (
          <p className="error">{state.errors.name[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="email">E-post</label>
        <input type="email" id="email" name="email" />
        {state.errors?.email && (
          <p className="error">{state.errors.email[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="message">Meddelande</label>
        <textarea id="message" name="message" />
        {state.errors?.message && (
          <p className="error">{state.errors.message[0]}</p>
        )}
      </div>

      <SubmitButton />

      {state.message && <p className="form-status">{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

Detta mönster är otroligt skalbart och robust. Din serveråtgärd blir den enda sanningskällan för valideringslogik, och Zod ger ett deklarativt och typsäkert sätt att definiera dessa regler. Klientkomponenten blir helt enkelt en konsument av det tillstånd som tillhandahålls av useFormState och visar fel där de hör hemma. Denna separation av ansvarsområden gör koden renare, lättare att testa och säkrare, eftersom validering alltid upprätthålls på servern.

`useFormState` kontra andra lösningar för formulärhantering

Med ett nytt verktyg kommer frågan: "När ska jag använda detta istället för det jag redan kan?" Låt oss jämföra useFormState med andra vanliga tillvägagångssätt.

`useFormState` kontra `useState`

• `useState` är perfekt för enkla, klientexklusiva formulär eller när du behöver utföra komplexa, realtidsinteraktioner på klientsidan (som live-validering medan användaren skriver) innan inskickning. Det ger dig direkt, finkornig kontroll.
• `useFormState` utmärker sig när formulärets tillstånd främst bestäms av ett serversvar. Den är designad för cykeln av förfrågan/svar vid formulärinskickning och är det självklara valet när du använder Server Actions. Den eliminerar behovet av att manuellt hantera fetch-anrop, laddningstillstånd och svarstolkning.

`useFormState` kontra tredjepartsbibliotek (React Hook Form, Formik)

Bibliotek som React Hook Form och Formik är mogna, funktionsrika lösningar som erbjuder en omfattande uppsättning verktyg för formulärhantering. De tillhandahåller:

• Avancerad validering på klientsidan (ofta med schemaintegration för Zod, Yup, etc.).
• Komplex tillståndshantering för nästlade fält, fält-arrayer och mer.
• Prestandaoptimeringar (t.ex. isolera om-renderingar till endast de fält som ändras).
• Hjälpfunktioner för controller-komponenter och integration med UI-bibliotek.

Så, när väljer man vad?

• Välj useFormState när:
  • Du använder React Server Actions och vill ha en inbyggd, integrerad lösning.
  • Din primära sanningskälla för validering är servern.
  • Du värdesätter progressiv förbättring och vill att dina formulär ska fungera utan JavaScript.
  • Din formulärlogik är relativt enkel och centrerad kring inskicknings-/svarscykeln.
• Välj ett tredjepartsbibliotek när:
  • Du behöver omfattande och komplex validering på klientsidan med omedelbar feedback (t.ex. validering vid blur eller change).
  • Du har mycket dynamiska formulär (t.ex. lägga till/ta bort fält, villkorlig logik).
  • Du använder inte ett ramverk med Server Actions och bygger ditt eget kommunikationslager mellan klient och server med REST- eller GraphQL-API:er.
  • Du behöver finkornig kontroll över prestanda och om-renderingar i mycket stora formulär.

Det är också viktigt att notera att dessa inte är ömsesidigt uteslutande. Du kan använda React Hook Form för att hantera tillstånd och validering på klientsidan i ditt formulär, och sedan använda dess inskickningshanterare för att anropa en Server Action. Men för många vanliga användningsfall ger kombinationen av useFormState och Server Actions en enklare och mer elegant lösning.

Bästa praxis och vanliga fallgropar

För att få ut det mesta av useFormState, överväg följande bästa praxis:

1. Håll åtgärder fokuserade: Din formuläråtgärdsfunktion bör vara ansvarig för en sak: att bearbeta formulärinskickningen. Detta inkluderar validering, datamutation (spara till en DB) och att returnera det nya tillståndet. Undvik sidoeffekter som inte är relaterade till formulärets utfall.
2. Definiera en konsekvent tillståndsform: Börja alltid med ett väldefinierat initialState och se till att din åtgärd alltid returnerar ett objekt med samma form, även vid framgång. Detta förhindrar körtidsfel på klienten när man försöker komma åt egenskaper som state.errors.
3. Omfamna progressiv förbättring: Kom ihåg att Server Actions fungerar utan JavaScript på klientsidan. Designa ditt gränssnitt för att hantera båda scenarierna på ett smidigt sätt. Se till exempel till att server-renderade valideringsmeddelanden är tydliga, eftersom användaren inte kommer att ha fördelen av en inaktiverad knapp utan JS.
4. Separera UI-bekymmer: Använd komponenter som vår SubmitButton för att kapsla in statusberoende UI. Detta håller din huvudformulärkomponent renare och respekterar regeln att useFormStatus måste användas i en barnkomponent.
5. Glöm inte tillgänglighet: När du visar fel, använd ARIA-attribut som aria-invalid på dina inmatningsfält och associera felmeddelanden med deras respektive fält med hjälp av aria-describedby för att säkerställa att dina formulär är tillgängliga för skärmläsaranvändare.

Vanlig fallgrop: Att använda useFormStatus i samma komponent

Ett vanligt misstag är att anropa useFormStatus i samma komponent som renderar <form>-taggen. Detta kommer inte att fungera eftersom hooken måste vara inuti formulärets kontext för att komma åt dess status. Extrahera alltid den del av ditt gränssnitt som behöver statusen (som en knapp) till sin egen barnkomponent.

Slutsats

Hooken useFormState, tillsammans med Server Actions, representerar en betydande utveckling i hur vi hanterar formulär i React. Den driver utvecklare mot en mer robust, servercentrerad valideringsmodell samtidigt som den förenklar tillståndshanteringen på klientsidan. Genom att abstrahera bort komplexiteten i inskickningslivscykeln låter den oss fokusera på det som betyder mest: att definiera vår affärslogik och bygga en sömlös användarupplevelse.

Även om den kanske inte ersätter omfattande tredjepartsbibliotek för alla användningsfall, tillhandahåller useFormState en kraftfull, inbyggd och progressivt förbättrad grund för den stora majoriteten av formulär i moderna webbapplikationer. Genom att bemästra dess mönster och förstå dess plats i React-ekosystemet kan du bygga mer motståndskraftiga, underhållbara och användarvänliga formulär med mindre kod och större tydlighet.